<template>
	<div class="rank">
		<teaheader></teaheader>
		<div class="content_wrap">
			<div class="list">
				<div class="head">
					<div class="w1">顺序</div>
					<div class="w2">姓名</div>
					<div class="w3">积分</div>
					<div class="w4">学校</div>
				</div>
				<template v-if="items.length>0">
					<ul v-for="(item,index) in items">
						<li v-if="item.sort==1">
							<div class="w1 c1">{{item.sort}}</div>
							<div class="w2">{{item.name}}</div>
							<div class="w3">{{item.totalInte}}</div>
							<div class="w4">{{item.schoolName}}</div>
						</li>
						<li v-if="item.sort==2">
							<div class="w1 c2">{{item.sort}}</div>
							<div class="w2">{{item.name}}</div>
							<div class="w3">{{item.totalInte}}</div>
							<div class="w4">{{item.schoolName}}</div>
						</li>
						<li v-if="item.sort==3">
							<div class="w1 c3">{{item.sort}}</div>
							<div class="w2">{{item.name}}</div>
							<div class="w3">{{item.totalInte}}</div>
							<div class="w4">{{item.schoolName}}</div>
						</li>
						<li v-if="item.sort>3"> 
							<div class="w1">{{item.sort}}</div>
							<div class="w2">{{item.name}}</div>
							<div class="w3">{{item.totalInte}}</div>
							<div class="w4">{{item.schoolName}}</div>
						</li>
						<!--<div class="list_center" @click="play(index)"></div>-->
						<!--<li>
							<div class="w1">NO.5</div>
							<div class="w2">李可欣</div>
							<div class="w3">1523</div>
							<div class="w4">郑州市惠济区东风路小学</div>
						</li>
						<li>
							<div class="w1">NO.6</div>
							<div class="w2">李可欣</div>
							<div class="w3">1523</div>
							<div class="w4">郑州市惠济区东风路小学</div>
						</li>
						<li>
							<div class="w1">NO.7</div>
							<div class="w2">李可欣</div>
							<div class="w3">1523</div>
							<div class="w4">郑州市惠济区东风路小学</div>
						</li>-->
					</ul>
					<!--<input type="hidden" v-model="item.pathOfText" />-->
				</template>
				<template v-else>
					<div class="nomsg">暂无排名信息</div>
				</template>
			</div>
			<div class="dot_top"></div>
			<div class="dot_btm"></div>
		</div>
		<div class="fenye">
			<ul class="pagelist" maxshowpageitem="5" pagelistcount="10" id="pagelist"></ul>
		</div>
		<teafooter></teafooter>
	</div>
</template>

<script type="text/ecmascript-6">
	export default {
		data(){
			return {
				items: [],
				pageindex: 1, //当前显示第几页
				size: 10, //每页显示数量
				sumlist: '',//列表总数
			}
		},
		created() {
			this.$http.get(domain + '/API/SummerAct/GetTeaSortList', {
				params: {
					'intcityID':this.$store.state.city_id,
					'pageindex': this.pageindex,
					'size': this.size
				}
			}).then(res => {
				let dt = res.body.sortList;
				let sum = res.body.total;
				this.items = dt;
				this.sumlist = sum;
				console.log(this.sumlist);
				$("#pagelist").initPage(this.sumlist, 1, this.rpage);
			});
		},
		mounted() {
		
		},
		methods: {
			rpage() {
				let that = this;
				let cur_page = arguments[0];
				console.log(cur_page);
				this.$http.get(domain + '/API/SummerAct/GetTeaSortList', {
					params: {
						'intcityID':this.$store.state.city_id,
						'pageindex': cur_page,
						'size': this.size
					}
				}).then(res => {
					let dt = res.body.sortList;
					that.items.splice(0, 10, ...dt);
				});
			}
			
			
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../../assets/scss/_mixin";
	.rank {
		background: #fff7b3;
		padding-bottom: 150px/$ppr;
	}
	
	.content_wrap {
		width: 660px/$ppr;
		height: 960px/$ppr;
		border: 1px solid #333;
		border-radius: 20px/$ppr;
		position: relative;
		max-height: 960px/$ppr;
		margin: 25px/$ppr auto;
		background: #fffefc;
		.dot_top {
			position: absolute;
			width: 68px/$ppr;
			height: 29px/$ppr;
			background: url(img/dot_top.png);
			background-size: 100%;
			top: -15px/$ppr;
			left: 108px/$ppr;
		}
		.dot_btm {
			position: absolute;
			width: 81px/$ppr;
			height: 28px/$ppr;
			background: url(img/dot_btm.png);
			background-size: 100%;
			bottom: -16px/$ppr;
			right: 70px/$ppr;
		}
		.list {
			.w1 {
				width: 125px/$ppr;
			}
			.w2 {
				width: 110px/$ppr;
			}
			.w3 {
				width: 150px/$ppr;
			}
			.w4 {
				width: 274px/$ppr;
			}
			.c1 {
				color: #fc4c33 !important;
			}
			.c2 {
				color: #ffce15 !important;
			}
			.c3 {
				color: #35dca6 !important;
			}
			.head {
				background: #fdfbec;
				width: 100%;
				height: 88px/$ppr;
				line-height: 88px/$ppr;
				border-top-left-radius: 20px/$ppr;
				border-top-right-radius: 20px/$ppr;
				div {
					text-align: center;
					font-size: 30px/$ppr;
					color: #fff7b3;
					font-weight: bold;
					-webkit-text-stroke: 2px/$ppr #333;
					float: left;
				}
				&:after {
					content: '';
					display: table-cell;
					clear: both;
				}
			}
			ul li {
				width: 100%;
				height: 84px/$ppr;
				line-height: 84px/$ppr;
				background: #fffefc;
				border-bottom: 1px dashed #fefad4;
				text-align: center;
				div {
					font-size: 24px/$ppr;
					color: #333;
					float: left;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					&:after {
						content: '';
						display: table-cell;
						clear: both;
					}
					&.w1 {
						font-weight: bold;
					}
				}
				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
	.nomsg {
			font-size: 35px/$ppr;
			text-align: center;
			color: red;
			margin-top: 30%;
		}
</style>